<meta charset="utf-8">
<meta name="viewport"
      content="width=device-width,minimum-scale=1.0,
      maximum-scale=1.0,user-scalable=no">
<style>
*{
  margin:0px;
  padding:0px;
}
body{
  background:#efefef;
}
.top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
  background:#efefef;
}
.weixin{
 margin:10px;
 font-size:18px;
 font-weight:bold;
}
.right{
 margin:10px;

}

.item_list{  
  background:white;
  padding:2px;
  
}
.item{
 position:relative;
  display:flex; 
}
.item1{
  display:flex;
   justify-content: space-between;
}
.pic{
 padding:2px;
 margin:2px;
}
.pic img{
  border-radius:4px;
}
.list{
  width:100%;
  padding:5px;
}
.date{
  font-size:12px;
  color:#999;
  padding:2px;
}
.massage{
  font-size:12px;
  color:#999;
  padding:2px;
}
.name{
 font-weight:bold;
 padding:2px;
}



.tabbar{
  position:fixed;
  width:100%;
  left:0px;
  bottom:0px;
  display:flex;
  background:white;
  padding-top:5px;
}
.tab{ 
  padding-bottom:5px;
  width:25%;
  font-size:12px;
  text-align: center;
  position:relative
}
.tabbar .txt{
  margin-top:2px;
}

.line{
  width:80%;
  height:1px;
  background:#efefef;
  position:absolute;
  right:0px;
  bottom:0px;
  }
.LJ{
  color:black;
}  
</style>
<div class="top">
  <div class="weixin">微信</div>
  <div class="right">
    <img  src="FDJ.png"  width="18px"/>
    <img  src="GD.png"  width="18px"/>
  </div>
</div>
 <!-- 页面列表 -->
<div class="item_list">
<div class="item">
       <div class="line"></div>
      <div class="pic">
          <img src="1.jpg"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">郑玉洁</div>
             <div class="date">昨天</div>  
         </div>  
      <div class="massage">我手僵了</div>
       </div>
  </div>

       <div class="item">
            <div class="line"></div>
           <div class="pic">
             <img src="1.png"  width="46px" />
           </div>
       <div class="list">

          <div class="item1">
             <div class="name">徐春香</div>
             <div class="date">1月4日</div>  
         </div>  
      <div class="massage">没事我就问问</div>
       </div>
  </div>



   
  <div class="item">
       <div class="line"></div>
      <div class="pic">
          <img src="2.png"  width="46px" />
      </div>
      <div class="list" >
		<a class="LJ" href="we_chat.html" style="text-decoration:none">
          <div class="item1">
             <div class="name">高圆圆</div>
             <div class="date">1月4日</div>  
         </div>
		</a>
      <div class="massage">我爱你</div>
       </div>
  </div>

<div class="item">
      <div class="line"></div>
      <div class="pic">
          <img src="3.png"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">宋甜甜</div>
             <div class="date">1月3日</div>  
         </div>  
      <div class="massage">好的</div>
       </div>
  </div>

<div class="item">
   
      <div class="pic">
          <img src="4.png"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">订阅号消息</div>
             <div class="date">1月2日</div>  
         </div>  
      <div class="massage">图书情报专硕圈：图书情报硕士21复试</div>
       </div>
  </div>
</div>
 <!-- /页面列表 -->
<!--底部导航-->
<div class="tabbar">
      <div  class="tab">
          <img src="微信2.png"   width="24"/>
          <div  class="txt">微信</div>
      </div>
      <div  class="tab">
		<a class="LJ" href="2.html" style="text-decoration:none">
          <img src="通讯录.png"  width="24"/>  
          <div  class="txt">通讯录</div> 
		</a>
      </div>
      <div  class="tab">
		<a class="LJ" href="fx.html" style="text-decoration:none">
          <img src="发 现.png"  width="24"/> 
          <div  class="txt">发现</div>  
		</a>
      </div>
      <div  class="tab">
		<a class="LJ" href="4.html" style="text-decoration:none">
          <img src="我.png"   width="24"/> 
          <div  class="txt">我</div>   
		</a>
      </div>
<!--/底部导航-->